/* @flow */

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  Button,
  Dimensions,
  TouchableOpacity,
} from 'react-native';
var Platform = require('Platform');

import ServerAlarmSectionListView from '../../src/ServerAlarmModule/ServerAlarmSectionListView'

export default class ServerTabScreen extends Component {

  static navigationOptions = ({navigation, screenProps}) => {

    const {navigate,state,setParams} = navigation;

    return {
      headerTitle: '服务器警告',
      headerTitleStyle:{
        alignSelf: 'center'
      },
      // headerTitleStyle:(Platform.OS === 'android')?{
      //   backgroundColor: 'white',
      //   color: '#BD10E0',
      //   height: 55,
      //   textAlign: 'center',
      //   fontSize: 18,
      //   paddingTop: 18,
      //   alignSelf: 'center', }:{},

      headerRight:(
        <View style={styles.headerRightBaseStyles}>
          <TouchableOpacity
            onPress={() => {
              console.log('这里注释掉了');
              // setParams({screenModalVisible: true})
            }}>
            <Text style={styles.headerBtnStyles}>
              筛选
            </Text>
          </TouchableOpacity>
        </View>
      ),
      headerLeft:(
        <View style={styles.headerLeftBaseStyles}>
          <TouchableOpacity
            onPress={() => setParams({rankModalVisible: true})}>
            <Text style={styles.headerBtnStyles}>
              排序
            </Text>
          </TouchableOpacity>
        </View>
        // <Button
        //   style={styles.naviBtnStyle}
        //   color='rgb(50, 236, 51)'
        //   title='排序'
          // onPress={() => setParams({rankModalVisible: true})}
        // ></Button>
      )
    }
  }

  constructor(props){
  	super(props);
  	this.state = {
      rankType:'normal',
    };
  }

  render() {
    const {state,params} = this.props.navigation;
    console.log(state);
    return (
      <View style={styles.container}>
        <ServerAlarmSectionListView
          screenModalVisible = {state.params&&state.params.screenModalVisible?state.params.screenModalVisible:false}
          rankModalVisible = {state.params&&state.params.rankModalVisible?state.params.rankModalVisible:false}
          rankClick = {()=>this.rankClick()}
          screenClick = {()=>this.screenClick()}
          >
        </ServerAlarmSectionListView>
      </View>
    );
  }

  rankClick(){
    console.log('我终于逃出来了');
    const {setParams} = this.props.navigation;
    setParams({rankModalVisible: false})
  }

  screenClick(){
    console.log('我终于逃出来了');
    const {setParams} = this.props.navigation;
    setParams({screenModalVisible: false})
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  headerRightBaseStyles:{
    backgroundColor:'rgb(255, 255, 255)',
    // backgroundColor:'red',
    marginRight:10,

  },
  headerLeftBaseStyles:{
    backgroundColor:'rgb(255, 255, 255)',
    marginLeft:10,
  },
  header_title:{
    backgroundColor: 'white',
    // color: '#BD10E0',
    color: 'rgb(23, 245, 200)',
    height: 55,
    textAlign: 'center',
    fontSize: 16,
    paddingTop: 18,
    alignSelf: 'center', // width of both buttons + no left-right padding
  },
  headerBtnStyles:{
    fontSize:18,
    color:'black',
  }
});
